HTML
HTML (pour HyperText Markup Language, ou langage de balises pour l'hypertexte) est un langage de structuration (ou balisage) permettant de ranger les contenus d'une page web.
Les contenus d'une page web sont :
- Les hypertextes (textes)
- Les hyperliens (liens cliquables)
- Les hypermédias (images, vidéos, sons, etc...)
HTML est actuellement en version 5 (depuis octobre 2014)
HTML n'est pas un langage de programmation !
Navigateurs
Un navigateur est un logiciel qui peut lire un fichier HTML. Il peut accéder à un fichier HTML de deux manières :
- Soit en ouvrant directement sur l'ordinateur un fichier ayant l'extension ".html" (L'URL commence par "file:///")
- Soit depuis une adresse URL si la page web est hébergée sur un serveur web (L'URL commence par "https://" ou "http://")
Le navigateur interprète le code HTML puis affiche les contenus à l'écran en fonction du code HTML.
Les balises HTML
Le code HTML est composé de balises. Il existe 2 types de balises :
-
Les balises doubles (les plus communes)
<!-- Par exemple la balise suivante est une balise double permettant de mettre en gras le texte situé entre la balise ouvrante et la balise fermante --> Le mot <b>gras</b> est en gras. -
Les balises autofermantes (plus rares), aussi appelées balises orphelines
<!-- La balise <br> est un exemple de balise autofermante (sans fermeture). Elle sert à faire un retour à la ligne --> Première ligne<br>Deuxième ligne
Les balises autofermantes NE DOIVENT PAS avoir de "/" à la fin : <br />. Cette manière d'écrire a été retirée et ne doit plus être utilisée depuis HTML5.
Les commentaires
Les commentaires sont des balises spéciales permettant aux développeurs de laisser des messages (explications, documentations, rappels, etc...) directement dans le fichier HTML. Ces messages seront ignorés par le navigateur et n'apparaîtront jamais à l'écran.
<!-- Ceci est un commentaire ! -->
Bien commenter son code est très important :
- Pour nous-même pour nous y retrouver quand le fichier est très gros et/ou très complexe (imaginez revenir dans votre code 6 mois plus tard)
- Pour les autres développeurs qui ne comprendront pas forcément ce qu'on a fait
Structure d'une page web HTML
Une page web HTML est toujours composée d'une structure obligatoire :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Header de la page -->
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
Cette structure est composée de :
- Le doctype : Il s'agit du type de fichier (html en l'occurrence). Il s'écrit toujours comme ça depuis HTML5 et doit être tout en haut du code HTML.
-
La balise
<html>: Elle englobe la totalité du reste de la page. Interdiction d'écrire quoi que ce soit en dehors de cette balise.
Cette balise contient un attribut "lang" qui permet de définir quelle est la langue principale des contenus de cette page. -
La balise
<head>: Elle doit être en premier dans la balise<html>
Les éléments dans cette balise ne se verront pas sur la page, il s'agit des infos comme le titre de la page, sa description, etc... - La balise
<body>: Elle contient la totalité du contenu visuel de la page web.
Le header de la page web peut contenir énormément de choses qui seront vues au fur et à mesure. On peut commencer par ces quelques éléments :
<head>
<meta charset="UTF-8">
<title>Ma première page web</title>
<meta name="description" content="Description de la page utilisée notamment par les moteurs de recherche">
</head>
- Le charset est la table d'encodage utilisée par la page web. Celle qui sera toujours utilisée est UTF-8 qui est une table permettant de gérer la quasi-totalité des caractères existants d'à peu près toutes les langues.
- La balise title définit le titre affiché dans l'onglet du navigateur en haut, et il est également utilisé dans les résultats de recherche des moteurs de recherche.
- La balise description définit la description visible dans les résultats de recherche des moteurs de recherche.
Indentation du code
L'indentation du code est le fait de décaler d'une indentation vers la droite tout le code présent à l'intérieur d'une balise (comme dans la balise head au dessus).
Cette indentation est indispensable, très importante et doit toujours être respectée car elle sert à lire le code beaucoup plus facilement.
Une indentation correctement réalisée donnera toujours un effet "escalier" :
<body>
<div>
<p>lorem</p>
</div>
<div>
<p>lorem</p>
</div>
</body>
L'inspecteur d'élément des navigateurs
Tous les navigateurs possède un inspecteur d'élément qui permet de voir la représentation du code source HTML de la page sur laquelle vous êtes.
Pour ouvrir l'inspecteur d'élément, on peut utiliser le raccourci "F12" ou bien faire un clique droit + inspecter/examiner
Cet inspecteur est très pratique pour débuguer son code, tester son CSS et voir comment la page est construite.
Il est aussi possible de voir le code source brute de la page actuelle dans un nouvel onglet via le raccourci "CTRL + U"